<template>


    <div class="Article" v-if="isshow">
        <div class="Articel_body">
            <div style="font-size:2rem;font-weight:600;display: flex;align-items: center;">
                <img :src="blogurl" style="margin-right:1rem">
                <div>博客分类
                </div>
            </div>
            <router-link v-for="item in categories" :to="item.path" class="Item_style">
                <img :src="item.url">
                <div class="Item_font">{{item.name}}</div>
                <div  class="Item_sign">{{item.sign}}</div>
            </router-link>
        </div>
    </div>


</template>

<!------------------------------>

<script setup lang="ts">
import golangurl from '../../assets/svg/golang.svg?url'
import weburl from '../../assets/svg/web.svg?url'
import otherurl from '../../assets/svg/other.svg?url'
import chaturl from '../../assets/svg/chat.svg?url'
import blogurl from '../../assets/svg/blog.svg?url'
import { storeToRefs } from 'pinia';
const global = getCurrentInstance()
//@ts-ignores
import { useCounterStore } from '../../stores/counter'

//API:获取分类--多余的分类放到其他里面
let categories = ref([{
    path: '/article/go',
    url: golangurl,
    name: 'Golang',
    sign:'少即是多--'
}, {
    path: '/article/web',
    url: weburl,
    name: '前端',
    sign:'比鱿鱼须还懂vue--'
}, {
    path: '/article/other',
    url: otherurl,
    name: '其他',
    sign: '其他体系的--'
}, {
    path: '/article/chat',
    url: chaturl,
    name: '闲聊',
    sign: '杂七杂八--'
}
])
//Flag:组件渲染
let isshow = ref<boolean>(false)
onMounted(() => {
    isshow.value = true
})
//Flag:监听变化
let Store = useCounterStore()
let { Animation } = storeToRefs(Store)
watch(() => { return Animation.value }, () => {
    isshow.value = false
})




</script>

<!------------------------------>

<style scoped lang="scss">








.Article{
    display: flex;
    justify-content: center;
    align-items: center;
    .Articel_body{
        display: flex;
        flex-direction: column;
    }
}
.Item_style{
    box-shadow: 0 2px 4px rgb(5 10 15 / 5%),0 7px 13px -3px rgb(5 10 15 / 30%);
    border-radius: .5rem;
    display: flex;
    padding-bottom: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
    width:49.375rem /* 790px -> 49.375rem */;
    height: 5.9375rem /* 95px -> 5.9375rem */;
    align-items:center;
    // justify-content: space-between;
    margin-top: 2rem;
    position: relative;
    text-decoration: none;
    color: rgba(0, 0, 0, 0.7);
    .Item_font{
    margin-left: .5rem;
    font-weight: 600;
    font-size: 1.5rem;
    }
    .Item_sign{
        font-family: 'kaiti';
        font-weight: 666;
        position: absolute;
        bottom: .3rem;
        right: 1rem;
    }
}

</style>